<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>漫鸽笔记</title>
<!--导入-->
<link rel="stylesheet" href="../static/plugin/layui/css/layui.css?v=3" media="all">
<script src="../static/plugin/layui/layui.js?v=3"></script>
<script src="../static/js/jquery-3.3.1.min.js?v=1"></script>
<script src="../static/js/man.js?v=1"></script>

<style type="text/css">
	 .bk{box-shadow: 6px 6px 10px #888888;border-radius:10px;height: 520px;width: 66%;background-color: #fff;margin: 0 auto;
	 	padding: 8px;}
</style>

</head>
<body style="background-color: #ddd;">
	<br><br><br><br>
	<div class="bk">
		<div style="text-align: center;">
			<h1>ManGe云笔记 安装向导</h1>
		</div>
		<br>


		<div id="step1" style="margin-top: 24px;margin-left: 24px;display: none;">
			<h2>
				欢迎使用ManGe云笔记<br>
				Gthab地址 : https://github.com/mangenotwork/ManGe-Notes<br>
				下载地址  ： 1060290526（加qq群下载最新版本）<br>
				QQ交流群  ： 1060290526
			</h2>
			<br>
			<a type="button" class="layui-btn layui-btn-radius layui-btn-lg" onclick="Start();">开始安装</a>
		</div>

		<div id="step2" style="margin-top: 24px;margin-left: 24px;display: none;">
			<h2> > 创建数据库（选择如下一种）</h2>
			<br>
			<a type="button" onclick="ToStep('mysql')" class="layui-btn layui-btn-radius layui-btn-lg">已有Mysql 数据库</a>
			<a type="button" onclick="ToStep('pgsql')" class="layui-btn layui-btn-radius layui-btn-lg">已有Postgresql 数据库</a>
			<a type="button" onclick="Localsql()" class="layui-btn layui-btn-radius layui-btn-lg">没有 数据库</a>
		</div>

		<div id="step2_mysql" style="margin-top: 24px;margin-left: 24px;display: none;">
			<h2> > 在Mysql 数据库创建数据</h2>
			<br>
			<div class="layui-form-item">
			    <label class="layui-form-label"> host</label>
			    <div class="layui-input-block">
			      <input type="text" id="mysql_host" placeholder="" class="layui-input" style="width: 350px;">
			    </div>
			  </div>
			<div class="layui-form-item">
			    <label class="layui-form-label"> port</label>
			    <div class="layui-input-block">
			      <input type="text" id="mysql_port" placeholder="" class="layui-input" style="width: 350px;">
			    </div>
			  </div>
			<div class="layui-form-item">
			    <label class="layui-form-label"> user</label>
			    <div class="layui-input-block">
			      <input type="text" id="mysql_user" placeholder="" class="layui-input" style="width: 350px;">
			    </div>
			  </div>
			<div class="layui-form-item">
			    <label class="layui-form-label"> password</label>
			    <div class="layui-input-block">
			      <input type="text" id="mysql_password" placeholder="" class="layui-input" style="width: 350px;">
			    </div>
			  </div>
			<div class="layui-form-item">
			    <label class="layui-form-label"> 数据库</label>
			    <div class="layui-input-block">
			      <input type="text" id="mysql_dbname" placeholder="" class="layui-input" style="width: 350px;">（输入mysql服务已有数据库）
			    </div>
			  </div>
			<br>
			<a type="button" onclick="ToStep('2')" class="layui-btn layui-btn-radius layui-btn-lg">返回上一步</a>
			<a type="button" onclick="MysqlTest()" class="layui-btn layui-btn-radius layui-btn-lg">测试连接</a>
			<a type="button" onclick="Mysql()" class="layui-btn layui-btn-radius layui-btn-lg">提交</a>
		</div>

		<div id="step2_pgsql" style="margin-top: 24px;margin-left: 24px;display: none;">
			<h2> > 在PostgreSQL 数据库创建数据</h2>
			<br>
			<div class="layui-form-item">
			    <label class="layui-form-label"> host</label>
			    <div class="layui-input-block">
			      <input type="text" id="pgsql_host" placeholder="" class="layui-input" style="width: 350px;">
			    </div>
			  </div>
			<div class="layui-form-item">
			    <label class="layui-form-label"> user</label>
			    <div class="layui-input-block">
			      <input type="text" id="pgsql_user" placeholder="" class="layui-input" style="width: 350px;">
			    </div>
			  </div>
			<div class="layui-form-item">
			    <label class="layui-form-label"> password</label>
			    <div class="layui-input-block">
			      <input type="text" id="pgsql_password" placeholder="" class="layui-input" style="width: 350px;">
			    </div>
			  </div>
			<div class="layui-form-item">
			    <label class="layui-form-label"> 数据库</label>
			    <div class="layui-input-block">
			      <input type="text" id="pgsql_dnname" placeholder="" class="layui-input" style="width: 350px;">（输入PostgreSQL服务已有数据库）
			    </div>
			  </div>
			<br>
			<a type="button" onclick="ToStep('2')" class="layui-btn layui-btn-radius layui-btn-lg">返回上一步</a>
			<a type="button" onclick="PgsqlTest()" class="layui-btn layui-btn-radius layui-btn-lg">测试连接</a>
			<a type="button" onclick="Pgsql()" class="layui-btn layui-btn-radius layui-btn-lg">提交</a>
		</div>

		<div id="step3" style="margin-top: 24px;margin-left: 24px;display: none;">
			<h2> > 媒体资源存放位置（选择如下一种）<br>
			(当前版本已经预设，即使填入也是记录为了兼容后面的更新)</h2>
			<br>
			<a type="button" onclick="ToStep('step3_local')" class="layui-btn layui-btn-radius layui-btn-lg">本地磁盘</a>
			<a type="button" onclick="ToStep('step3_oss')" class="layui-btn layui-btn-radius layui-btn-lg">阿里云对象存储</a>
			<a type="button" onclick="ToStep('step3_cos')" class="layui-btn layui-btn-radius layui-btn-lg">腾讯云对象存储</a>
		</div>

		<div id="step3_local" style="margin-top: 24px;margin-left: 24px;display: none;">
			<h2> > 多媒体资源存放到本地 </h2>
			<br>
			<div class="layui-form-item">
			    <label class="layui-form-label"> 本地路径</label>
			    <div class="layui-input-block">
			      <input type="text" id="media_local_path" placeholder="" class="layui-input" style="width: 350px;">
			    </div>
			  </div>
			<br>
			<a type="button" onclick="ToStep('3')" class="layui-btn layui-btn-radius layui-btn-lg">返回上一步</a>
			<a type="button" onclick="LocalMedia()" class="layui-btn layui-btn-radius layui-btn-lg">提交</a>
		</div>

		<div id="step3_oss" style="margin-top: 24px;margin-left: 24px;display: none;">
			<h2> > 多媒体资源存放到阿里云OSS</h2>
			<br>
			<div class="layui-form-item">
			    <label class="layui-form-label"> oss_access_keyid</label>
			    <div class="layui-input-block">
			      <input type="text" id="oss_access_keyid" placeholder="" class="layui-input" style="width: 350px;">
			    </div>
			  </div>
			<div class="layui-form-item">
			    <label class="layui-form-label"> oss_secret</label>
			    <div class="layui-input-block">
			      <input type="text" id="oss_secret" placeholder="" class="layui-input" style="width: 350px;">
			    </div>
			  </div>
			<div class="layui-form-item">
			    <label class="layui-form-label"> oss_endpoint</label>
			    <div class="layui-input-block">
			      <input type="text" id="oss_endpoint" placeholder="" class="layui-input" style="width: 350px;">
			    </div>
			  </div>
			<div class="layui-form-item">
			    <label class="layui-form-label"> oss_bucketName</label>
			    <div class="layui-input-block">
			      <input type="text" id="oss_bucketName" placeholder="" class="layui-input" style="width: 350px;">
			    </div>
			  </div>
			<br>
			<a type="button" onclick="ToStep('3')" class="layui-btn layui-btn-radius layui-btn-lg">返回上一步</a>
			<a type="button" onclick="AliMedia()" class="layui-btn layui-btn-radius layui-btn-lg">提交</a>
		</div>

		<div id="step3_cos" style="margin-top: 24px;margin-left: 24px;display: none;">
			<h2> > 多媒体资源存放到腾讯云COS</h2>
			<br>
			<div class="layui-form-item">
			    <label class="layui-form-label"> cos_url</label>
			    <div class="layui-input-block">
			      <input type="text" id="cos_url" placeholder="" class="layui-input" style="width: 350px;">
			    </div>
			  </div>
			<div class="layui-form-item">
			    <label class="layui-form-label"> cos_secretid</label>
			    <div class="layui-input-block">
			      <input type="text" id="cos_secretid" placeholder="" class="layui-input" style="width: 350px;">
			    </div>
			  </div>
			<div class="layui-form-item">
			    <label class="layui-form-label"> cos_secretkey</label>
			    <div class="layui-input-block">
			      <input type="text" id="cos_secretkey" placeholder="" class="layui-input" style="width: 350px;">
			    </div>
			  </div>
			<br>
			<a type="button" onclick="ToStep('3')" class="layui-btn layui-btn-radius layui-btn-lg">返回上一步</a>
			<a type="button" onclick="TencentMedia()" class="layui-btn layui-btn-radius layui-btn-lg">提交</a>
		</div>

		<div id="step4" style="margin-top: 24px;margin-left: 24px;display: none;">
			<h2> > 设置管理账号 </h2>
			<br>
			<div class="layui-form-item">
			    <label class="layui-form-label"> 账号*</label>
			    <div class="layui-input-block">
			      <input type="text" id="account" placeholder="" class="layui-input" style="width: 350px;">
			    </div>
			  </div>
			<div class="layui-form-item">
			    <label class="layui-form-label"> 密码*</label>
			    <div class="layui-input-block">
			      <input type="text" id="password" placeholder="" class="layui-input" style="width: 350px;">
			    </div>
			  </div>
			<div class="layui-form-item">
			    <label class="layui-form-label"> 手机</label>
			    <div class="layui-input-block">
			      <input type="text" id="phone" placeholder="" class="layui-input" style="width: 350px;">
			    </div>
			  </div>
			<div class="layui-form-item">
			    <label class="layui-form-label"> 邮箱</label>
			    <div class="layui-input-block">
			      <input type="text" id="mail" placeholder="" class="layui-input" style="width: 350px;">
			    </div>
			  </div>
			<br>
			<a type="button" onclick="CreateAdmin()" class="layui-btn layui-btn-radius layui-btn-lg">提交</a>
			
		</div>

	</div>
</body>

<script type="text/javascript">
	var step = "<<<.step>>>";
	console.log(step);

	function Show(){
		switch(step) {
	    	case "1":
	 			$("#step1").show();
	    		break;
	    	case "2":
	 			$("#step2").show();
	    		break;
	    	case "3":
	 			$("#step3").show();
	    		break;
	    	case "4":
	 			$("#step4").show();
	    		break;
	    	default:
	    		console.log("step");
		} 
	}

	Show();

	function HideAll(){
		$("#step1").hide();
		$("#step2").hide();
		$("#step2_mysql").hide();
		$("#step2_pgsql").hide();
		$("#step3").hide();
		$("#step4").hide();
		$("#step3_local").hide();
		$("#step3_oss").hide();
		$("#step3_cos").hide();
	}

	function ToStep(id){
		HideAll()
		switch(id) {
	    	case "1":
	 			$("#step1").show();
	    		break;
	    	case "2":
	 			$("#step2").show();
	    		break;
	    	case "3":
	 			$("#step3").show();
	    		break;
	    	case "4":
	 			$("#step4").show();
	    		break;
	    	case "mysql":
	    		$("#step2_mysql").show();
	    		break;
	    	case "pgsql":
	    		$("#step2_pgsql").show();
	    		break;
	    	case "step3_local":
	    		$("#step3_local").show();
	    		break;
	    	case "step3_oss":
	    		$("#step3_oss").show();
	    		break;
	    	case "step3_cos":
	    		$("#step3_cos").show();
	    		break;
	    	default:
	    		console.log("step");
		} 
	}

	function Start(){
		pubAjaxGET("/api/install/start",function(datas){
			console.log(datas);
			location.reload();
		})
	}

	function MysqlTest(){
		//   /api/install/mysqltset
		var host = $("#mysql_host").val();
		var port = $("#mysql_port").val();
		var user = $("#mysql_user").val();
		var password = $("#mysql_password").val();
		var dbname = $("#mysql_dbname").val();
		var url = "/api/install/mysqltset?host="+host+"&port="+port+"&user="+user+"&password="+password+"&dbname="+dbname;
		pubAjaxGET(url,function(datas){
			console.log(datas);
			location.reload();
		})
	}

	function Mysql(){
		//   /api/install/mysql
		var host = $("#mysql_host").val();
		var port = $("#mysql_port").val();
		var user = $("#mysql_user").val();
		var password = $("#mysql_password").val();
		var dbname = $("#mysql_dbname").val();
		var url = "/api/install/mysql?host="+host+"&port="+port+"&user="+user+"&password="+password+"&dbname="+dbname;
		pubAjaxGET(url,function(datas){
			console.log(datas);
			location.reload();
		})
	}

	function PgsqlTest(){
		//   /api/install/pgsqltset
		var host = $("#pgsql_host").val();
		var user = $("#pgsql_user").val();
		var password = $("#pgsql_password").val();
		var dbname = $("#pgsql_dbname").val();
		var url = "/api/install/pgsqltset?host="+host+"&user="+user+"&password="+password+"&dbname="+dbname;
		pubAjaxGET(url,function(datas){
			console.log(datas);
			location.reload();
		})
	}

	function Pgsql(){
		//   /api/install/pgsql
		var host = $("#pgsql_host").val();
		var user = $("#pgsql_user").val();
		var password = $("#pgsql_password").val();
		var dbname = $("#pgsql_dbname").val();
		var url = "/api/install/pgsql?host="+host+"&user="+user+"&password="+password+"&dbname="+dbname;
		pubAjaxGET(url,function(datas){
			console.log(datas);
			location.reload();
		})
	}

	function Localsql(){
		//   /api/install/localsql
		pubAjaxGET("/api/install/localsql",function(datas){
			console.log(datas);
			location.reload();
		})
	}

	function LocalMedia(){
		//		/install/localmedia
		var path = $("#media_local_path").val();
		var url = "/api/install/localmedia?path="+path;
		pubAjaxGET(url,function(datas){
			console.log(datas);
			location.reload();
		})
	}

	function AliMedia(){
		//		/install/alimedia
		var oss_access_keyid = $("#oss_access_keyid").val();
		var oss_secret = $("#oss_secret").val();
		var oss_endpoint = $("#oss_endpoint").val();
		var oss_bucketName = $("#oss_bucketName").val();
		var url = "/api/install/alimedia?oss_access_keyid="+oss_access_keyid+"&oss_secret="+oss_secret+"&oss_endpoint="+oss_endpoint+"&oss_bucketName="+oss_bucketName;
		pubAjaxGET(url,function(datas){
			console.log(datas);
			location.reload();
		})
	}

	function TencentMedia(){
		//		/install/tencentmedia
		var cos_url = $("#cos_url").val();
		var cos_secretid = $("#cos_secretid").val();
		var cos_secretkey = $("#cos_secretkey").val();
		var url = "/api/install/tencentmedia?cos_url="+cos_url+"&cos_secretid="+cos_secretid+"&cos_secretkey="+cos_secretkey;
		pubAjaxGET(url,function(datas){
			console.log(datas);
			location.reload();
		})
	}

	function CreateAdmin(){
		// /install/admin
		var account = $("#account").val();
		var password = $("#password").val();
		var phone = $("#phone").val();
		var mail = $("#mail").val();
		var url = "/api/install/admin?account="+account+"&password="+password+"&phone="+phone+"&mail="+mail;
		pubAjaxGET(url,function(datas){
			console.log(datas);
			location.reload();
		})
	}

</script>

</html>